import { quillEditor } from 'vue-quill-editor'
export default {
    components: {
quillEditor
},
    data () {
        return {
             editorOption: {// some quill options
             height:'500'
                 },
             typeId:'',          
            modal:false,
            filter:{ //分页数据
                list:[],//装载数据
                total:0,//总记录
                page:1,//页码
                limit:10,
                title:''
            },
            classifyies: [
                {
                    title: '新闻分类',
                    expand: true,
                     render: (h, { root, node, data }) => {
                        return h('span', {
                            style: {
                                display: 'inline-block',
                                width: '100%'
                            }
                        }, [
                            h('span', [
                                h('Icon', {
                                    props: {
                                        type: 'ios-folder-outline'
                                    },
                                    style: {
                                        marginRight: '8px'
                                    }
                                }),
                                h('span', data.title)
                            ]),
                            h('span', {
                                style: {
                                    display: 'inline-block',
                                    float: 'right',
                                    marginRight: '32px'
                                }
                            }, [
                                h('Button', {
                                    props: Object.assign({}, this.buttonProps, {
                                        icon: 'ios-plus-empty',
                                        type: 'primary'
                                    }),
                                    style: {
                                        width: '52px'
                                    },
                                    on: {
                                        click: () => { this.append(data) }
                                    }
                                })
                            ])
                        ]);
                    },                    
                    children: [],
                }
            ],
            buttonProps: {
                type: 'ghost',
                size: 'small',
            }
        }
    },
    methods: {


        //编辑器
          onEditorBlur(editor) {
    console.log('editor blur!', editor)
  },
  onEditorFocus(editor) {
    console.log('editor focus!', editor)
  },
  onEditorReady(editor) {
    console.log('editor ready!', editor)
  },
  onEditorChange({ editor, html, text }) {
    console.log('editor change!', editor, html, text)
    this.content = html
  },
        //打开 添加页面
        onOpen(){ 
            if(  this.typeId){
                this.modal = true;
            Object.assign(this.$data.formValidate,this.$options.data().formValidate);
               this.formValidate.typeId= this.typeId;
             // 对象合并，并且初始表单数据
            } else{
                this.modal = false;
                  this.$Message.info('请选择类别');
            }
           
        },
        //更新页面的 打开
          update (row) {
            this.modal = true;
        Object.assign(this.$data.formValidate,row);
        },
         //提交添加功能
          handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {   
                    if(this.formValidate._id && this.formValidate._id.length>0){
                        this.$http.put(`http://localhost:3000/${this.module}/data/${this.formValidate._id}`,this.formValidate)
                        .then(res=>{
                            this.$Message.success('修改成功!');
                            delete this.formValidate._id;
                            this.modal = false;
                            this.getData();
                        })
                    }else{
                        this.$http.post(`http://localhost:3000/${this.module}/data`,this.formValidate)
                        .then(res=>{
                            this.$Message.success('添加成功!');
                            this.modal = false;
                            this.getData();
                        })
                    }
                    

                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        //重置表单功能
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        //删除单个功能
        remove (id) {

            this.$Modal.confirm({
                title: '确认删除数据',
                content: '<p>确认删除该记录吗？</p>',
                onOk: () => {
                    
                    this.$http.delete(`http://localhost:3000/${this.module}/data/${id}`)
                    .then(res=>{
                        this.$Message.info('删除数据成功');
                        this.getData();
                    })
                   
                },
                onCancel: () => {
                    this.$Message.info('你取消了删除该记录');
                }
            });

            
        },
        //多个删除 之多选
         onSelectionChange(selection){
            if(selection && selection.length>0){
                 var ids = [];
                 let selectionLen = selection.length;
                 for(let i=0;i<selectionLen;i++){
                     ids.push(selection[i]._id);
                 }
                 this.ids = ids;
            }
        },
        //多个删除功能
         onDeletes(){
            
             this.$Modal.confirm({
                title: '确认删除数据',
                content: '<p>确认删除该记录吗？</p>',
                onOk: () => {
               
                    this.$http.post(`http://localhost:3000/${this.module}/deletes`,{ids:this.ids.toString()})
                    .then(res=>{
                        this.$Message.info('删除数据成功');
                        this.getData();
                    })                    
                },
                onCancel: () => {
                    this.$Message.info('点击了取消');
                }
            });
        },
        //分页功能 获取列表数据
        getData(){
                 this.$http.post(`http://localhost:3000/${this.module}/list`,this.filter)
            .then(res=>{
                this.filter.list=res.data.rows;
                this.filter.total=res.data.total;
                this.filter.page=res.data.page;
            })
        },
      //分页功能  改变页码
         onChange(page){
          this.filter.page = page;
          this.getData();
        },
        //分页功能  改变
        onPageSizeChange(pageSize){
            this.filter.limit = pageSize;
            this.getData();
        },
        //搜索框
        onSearch(){
                 this.getData();
        },        
        renderContent (h, { root, node, data }) {
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '100%'
                }
            }, [
                h('span', [
                    h('Icon', {
                        props: {
                            type: 'ios-paper-outline'
                        },
                        style: {
                            marginRight: '8px'
                        }
                    }),
                    h('span', data.title)
                ]),
                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right',
                        marginRight: '32px'
                    }
                })
            ]);
        },
        //点击树
        onSelectionChangeTree(selection){ 
                if(selection&&selection.length>0){
                        this.typeId=selection[0]._id;
                        this.$http.post('http://localhost:3000/classify/showList/'+this.typeId)
                        .then(res=>{
                             var dataChildren=res.data.toString();
                               this.$http.post(`http://localhost:3000/${this.module}/classifyLists`,{typeId:dataChildren})
                               .then(res=>{
                                    this.filter.list=res.data;
                                    this.filter.total=res.data.length;
                                    this.filter.page=Math.ceil(res.data.length/10);
                               })
                        })
                }else{
                    this.typeId='';
                        this.$Message.info('你取消了选择');
                        this.getData();
                }
        },
       
    },
    created(){
         this. getData()
    }
}